<template>
  <view>
    <!-- 顶部导航 -->
    <!--    <fa-navbar title="首页" :border-bottom="false"></fa-navbar>-->
    <view class="" :style="{background:theme.bgColor, paddingTop: `${menu.top}px`, paddingBottom: '10px' }">
      <view :style="{height: `${menu.height}px`}" class="flex items-center top">
        <uni-icons type="location-filled" size="23" color="white" class="icon"></uni-icons>
        <view class="address">无锡</view>
        <uni-icons type="down" size="10" color="white" class="direction"></uni-icons>
        <view class="search ">
          <fa-search :mode="2" :no-focus="true" @focus="goPage('/pages/search/search')"></fa-search>
        </view>
      </view>

    </view>

    <view class="">
      <u-swiper :list="vuex_config.swiper" border-radius="0" :height="350"
                @click="openPage"></u-swiper>
    </view>

    <!--    <view class="notice bg-white" v-if="notice.length">
          <u-notice-bar mode="horizontal" type="warning" :duration="5000" :is-circular="false" :autoplay="true"
                        :list="notice" @click="click"></u-notice-bar>
        </view>-->

    <view class="" :data-navigates="navigates">
      <!--			<swiper class="swiper" @change="change" :style="{ height: (vuex_config.navigate && vuex_config.navigate.length > 8 ? 580 : 280) + 'rpx' }">-->
      <!--				<swiper-item v-for="(res, key) in navigateList" :key="key">
                <u-grid :col="3" hover-class="hover-class">
                  <u-grid-item v-for="(item, index) in res" :custom-style="{ padding: '35rpx 0' }" @click="grids(item)" :key="index">
                    <u-icon :name="item.image" color="#909399" :size="item.size"></u-icon>
                    <view class="u-m-t-20">{{ item.name }}</view>
                  </u-grid-item>
                </u-grid>
              </swiper-item>-->
      <!--        <swiper-item v-for="(res, key) in vuex_config.navigate" :key="key">-->
      <view class="grid " :style="[{background:theme.bgColor}]">
        <button class="grid_item" :open-type="item.name=='客服服务'?'contact':''"
                v-for="(item, index) in vuex_config.navigate" @click="grids(item)">
          <u-icon :name="item.image" color="#909399" size="85"></u-icon>
          <view class="name">{{ item.name }}</view>
        </button>
      </view>
      <!--        </swiper-item>-->
      <!--			</swiper>-->
      <view class="indicator-dots" v-if="navigateList.length > 1">
        <view class="indicator-dots-item" v-for="(res, key) in navigateList" :key="key"
              :class="[current == key ? 'indicator-dots-active' : '']"></view>
      </view>
    </view>
    <view class="index-content">
      <view class="title">
        <view class="left">
          <text>精品推荐</text>
          <image src="/static/hot.png"></image>
        </view>
		<!-- 参数区别 -->
        <view class="right"  @click="goPage('/pages/goods/goods?flag=common')"> 
          <text>更多</text>
          <uni-icons type="right" size="10" class="icon"></uni-icons>
        </view>
      </view>
      <view class="hots-list">
        <view class="item" v-for="(item, index) in hots" :key="index"
              @click="goPage('/pages/goods/detail?flag=common&id=' + item.id)">
          <view class="images">
            <image :src="item.image" mode="aspectFill"></image>
          </view>
          <view class="content">
            <view class="u-p-5 name u-flex u-row-between">
              <text class="u-line-1" style="width: 400rpx">{{ item.title }}</text>
              <view @click.stop="collect(item)">
                <u-icon :name="item.iscollecinfo==1?'heart-fill':'heart'" :color="item.iscollecinfo==1?'red':'inherit'"
                        size="36"></u-icon>
              </view>
            </view>
            <view class="u-flex u-row-between u-p-5">
              <view class="price">
                <text>￥{{ item.price }}/1次</text>
              </view>
            </view>
            <view class="u-line-1 u-p-5 intro">
              <!-- 流瑜伽、艾扬格、普拉提、空中瑜伽、 -->
			  {{item.subtitle}}
            </view>
            <view>
				<!-- item.image -->
              <image :src="item2" mode="aspectFill" v-for="item2 in item.images" class="sm_img"></image>
            </view>
          </view>
        </view>
        <!-- 空数据 -->
        <view class="u-flex u-row-center fa-empty u-p-b-60" v-if="!hots.length">
          <image src="../../static/image/data.png" mode=""></image>
          <view class="u-tips-color">暂无更多的热门商品~</view>
        </view>
      </view>
    </view>
    <view class="index-content">
      <view class="title">
        <view class="left">
          <text>积分商城</text>
          <image src="/static/new.png"></image>
        </view>
        <view class="right"  @click="goPage('/pages/goods/goodsjf?flag=jifen')"> 
          <text>更多</text>
          <uni-icons type="right" size="10" class="icon"></uni-icons>
        </view>
      </view>
      <view class="goods-list">
		  <!-- recommends -->
        <view class="item" v-for="(item, index) in recommends" :key="index"
              @click="goPage('/pages/goods/detail?flag=jifen&id=' + item.id)">
          <view class="images">
            <image :src="item.image" mode="aspectFill"></image>
          </view>
          <view class="u-p-15 name u-flex u-row-between">
            <text class="u-line-1">{{ item.title }}</text>
            <view @click.stop="collect(item)">
              <u-icon :name="item.iscollecinfo==1?'heart-fill':'heart'" :color="item.iscollecinfo==1?'red':'inherit'"
                      size="36"></u-icon>

            </view>
          </view>
          <!--					<view class="foot u-flex u-row-between u-tips-color">
                      <view class="">
                        <text class="u-m-r-10">销量</text>
                        <text>{{ item.sales }}</text>
                      </view>
                      <view class="">
                        <text class="u-m-r-10">浏览</text>
                        <text>{{ item.views || 0 }}</text>
                      </view>
                    </view>-->
          <view class="u-flex u-row-between u-p-15">
            <view class="price">
              <text>￥{{ item.price }}</text>
            </view>
            <!--						<text class="market_price u-tips-color">￥{{ item.marketprice }}</text>-->
          </view>
        </view>
        <!-- 空数据 -->
        <view class="u-flex u-row-center fa-empty u-p-b-60" v-if="!recommends.length">
          <image src="../../static/image/data.png" mode=""></image>
          <view class="u-tips-color">暂无更多的推荐商品~</view>
        </view>
      </view>
      <!-- 加载更多 -->
      <view class="u-p-b-30" v-if="recommends.length">
        <u-loadmore :status="has_more ? status : 'nomore'"/>
      </view>
    </view>
    <!-- 回到顶部 -->
    <u-back-top :scroll-top="scrollTop" :icon-style="{ color: theme.bgColor }"
                :custom-style="{ backgroundColor: theme.lightColor }"></u-back-top>
    <!-- 底部导航 -->
    <fa-tabbar></fa-tabbar>
  </view>
</template>

<script>
import collect from "../my/collect.vue";

export default {
  data() {
    return {
      loading: true,
      status: 'loadmore',
      is_update: false,
      has_more: false,
      current: 0,
      scrollTop: 0,
      navigateList: [],
      hots: [],
      recommends: [],
      menu: uni.getMenuButtonBoundingClientRect()
    };
  },
  onShow() {
    this.getGoodsIndex();
    console.log(this.menu)
  },
  computed: {
    notice() {
      let arr = [];
      if (this.vuex_config.notice) {
        this.vuex_config.notice.map(item => {
          arr.push(item.title);
        });
      }
      return arr;
    },
    navigates() {
      if (this.vuex_config.navigate) {
        let arr1 = [],
            arr2 = [];
        this.vuex_config.navigate.forEach((item, index) => {
          if (((index + 1) % 9 == 0 && index != 0) || index + 1 == this.vuex_config.navigate.length) {
            arr2.push(item);
            arr1.push(arr2);
            arr2 = [];
          } else {
            arr2.push(item);
          }
        });
        this.navigateList = arr1;
      }
      return 1;
    }
  },
  methods: {
    collect(item) {
      console.log(item);
      this.$api
          .optionCollect({
            goods_id: item.id
          })
          .then(res => {
            if (res.code) {
              item.iscollecinfo = item.iscollecinfo == 1 ? 0 : 1;
            }
          });
    },
    change(e) {
      this.current = e.detail.current;
    },
    grids(e) {
      let path = e.path;
      if (path == '/' || !path) {
        return;
      }
      if (path.substr(0, 1) == 'p') {
        path = '/' + path;
      }
      if (path.includes('http')) {
        this.$u.vuex('vuex_webs', {
          path: e.path,
          title: e.name
        });
        this.$u.route('/pages/webview/webview');
        return;
      }
      this.$u.route(path);
    },
    openPage(index) {
      this.grids({
        path: this.vuex_config.swiper[index].url,
        name: this.vuex_config.swiper[index].title
      });
    },
    click(index) {
      if (this.vuex_config.notice) {
        let url = this.vuex_config.notice[index].path;
        if (url) {
          this.grids({
            path: url,
            name: this.vuex_config.notice[index].title
          });
        }
      }
    },
    getGoodsIndex() {
      this.$api.getGoodsIndex().then(({code, data: res, msg}) => {
        if (code) {
          this.hots = res.hots;
          // this.recommends = res.recommends;
		   this.recommends = res.jifengoods;
        }
      });
    }
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  //下拉刷新
  onPullDownRefresh() {
  },
  onReachBottom() {
  }
};
</script>

<style lang="scss">
page {
  background-color: #f4f6f8;
}
</style>
<style lang="scss" scoped>
.indicator-dots {
  display: flex;
  justify-content: center;
  align-items: center;
}

.indicator-dots-item {
  background-color: $u-tips-color;
  height: 6px;
  width: 6px;
  border-radius: 10px;
  margin: 0 3px;
}

.indicator-dots-active {
  background-color: $u-type-primary;
}

.notice {
  margin-bottom: 30rpx;
}

.index-content {
  margin-top: 30rpx;
  background-color: #ffffff;

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 40rpx 0 40rpx;

    .left {
      display: flex;
      align-items: flex-start;

      text {
        font-size: 30rpx;
      }

      image {
        width: 56rpx;
        height: 12rpx;
        margin-left: 7rpx;
      }
    }

    .right {
      font-size: 20rpx;

      .icon {
        margin-left: 16rpx;
      }
    }
  }
}

.goods-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 30rpx;
  padding: 0 30rpx;

  .item {
    width: calc((100vw - 90rpx) / 3);
    background-color: #ffffff;
    box-shadow: 0px 0px 5px rgb(233, 235, 243);
    margin-bottom: 30rpx;
    border-radius: 10rpx;
    overflow: hidden;
    border: 1px solid #e9ebf3;

    .name {
      min-height: 110rpx;
    }

    .foot {
      padding: 0 15rpx;
    }

    .images {
      width: 100%;
      height: 200rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .market_price {
      text-decoration: line-through;
      margin-left: 10rpx;
    }
  }
}

.hots-list {
  margin-top: 30rpx;
  padding: 0 30rpx 30rpx;

  .item {
    width: 100%;
    background-color: #ffffff;
    box-shadow: 0px 0px 5px rgb(233, 235, 243);
    margin-bottom: 30rpx;
    border-radius: 10rpx;
    overflow: hidden;
    border: 1px solid #e9ebf3;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .images {
      width: 260rpx;
      height: 260rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .content {
      margin-left: 10rpx;
      flex: 1;

      .name {
        // min-height: 110rpx;
      }

      .foot {
        padding: 0 15rpx;
      }

      .market_price {
        text-decoration: line-through;
        margin-left: 10rpx;
      }

      .intro {
        font-size: 18rpx;
        color: #999999
      }

      .sm_img {
        width: 100rpx;
        height: 100rpx;
        border-radius: 10rpx
      }

      .sm_img + .sm_img {
        margin-left: 10rpx;
      }
    }
  }
}

.grid {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;

  padding-bottom: 10px;
  color: white;

  .grid_item {

    width: 25%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    background-color: transparent;

    padding: 0 !important;

    .name {
      font-size: 13px;
      font-weight: normal;
      color: white;
    }
  }

  .grid_item::after {
    border: none;
  }
}

.top {
  color: white;

  .icon {
    margin-left: 20rpx;
  }

  .address {
    margin-left: 16rpx;
  }

  .direction {
    margin-left: 10rpx;
  }

  .search {
    width: 360rpx;
    margin-left: 20rpx;
  }
}
</style>
